<template>
  <el-card>
  <template #header>
  <div class="card-header">
  <span>{{title}}</span>
  </div>
  </template>
  <el-table v-if= "tableData" :data="tableData" style="width:100%">
  <el-table-column
  v-for = "{prop,label} in colConfigs"
  :key="prop"
  :prop="prop"
  :label="label"
  width="160">
  <template v-if="prop == 'kjzt'" #default="scope">
  <el-switch v-model="scope.row.visible" @change="changeSwitch($event, scope.row.kcmc)" />
  </template>
  </el-table-column>
  <el-table-column label='操作' width="260">
  <template #default="scope">
  <el-button plain @click="edit(scope.row.kcmc)">
  <el-icon ><EditPen /></el-icon>
  </el-button>
  <el-button plain @click="files(scope.row.kcmc)">
  <el-icon><Files /></el-icon>
  </el-button>
  <el-button plain @click="monitor(scope.row.kcmc)">
  <el-icon><Monitor /></el-icon>
  </el-button>
  <el-button plain @click="school(scope.row.kcmc)">
  <el-icon><School /></el-icon>
  </el-button>
  </template>
  </el-table-column>
  </el-table>
  <span v-else-if="content">{{ content }}</span>
  <span v-show="showMessage.type && showMessage.course">正在{{ showMessage.type + showMessage.course }}</span>
  </el-card>
</template>

<script>
import { ElMessage } from 'element-plus';
import { EditPen, Files, Monitor, School } from '@element-plus/icons-vue';

export default {
  name: 'XuanXk',
  props: {
    title:{
      type:String,
      default:'标题'
    },
    content:{
      type:String,
      default:'主体内容'
    },
    tableData:{
      type:Array
    }
  },
   components: {
        EditPen, Files, Monitor, School
   },
   data(){
     return{
       colConfigs:[{
         prop:'xh',label:'序号'
       },{
         prop:'kcmc',label:'课程名称'
       },{
         prop:'cjsj',label:'创建时间'
       },{
         prop:'kjzt',label:'可见状态'
       }],
       showMessage: {
                type: '',
                course: ''
            }
        }
    },
    methods: {
        edit(kcmc) {
            Object.assign(this.showMessage, {
                type: '编辑',
                course: kcmc
            });
        },
        files(kcmc) {
            Object.assign(this.showMessage, {
                type: '资源管理',
                course: kcmc
            });
        },
        monitor(kcmc) {
            Object.assign(this.showMessage, {
                type: '资源编排',
                course: kcmc
            });
        },
        school(kcmc) {
            Object.assign(this.showMessage, {
                type: '开课',
                course: kcmc
            });
     },
     changeSwitch(newVal, kcmc) {
            if (newVal == true) {
                ElMessage.success(`${kcmc}现在是可见的`);
            } else {
                ElMessage.warning(`${kcmc}现在是不可见的`);
            }
        }
    }
}
</script>


<style scoped>
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.el-card{
min-height:45%
}

</style>
